<template>
  <div class="container">
    <van-cell-group inset>
      <!-- 手机号 -->
      <van-field v-model="state.tel" type="tel" center placeholder="请输入手机号">
        <template #left-icon>
          <Svgview ion="#icon-shouji" />
        </template>
      </van-field>
      <!-- 密码 -->
      <form>
        <van-field v-model="state.paw" type="password" autocomplete="off" center placeholder="请输入密码">
          <template #left-icon>
            <Svgview ion="#icon-yuechi_o" />
          </template>
        </van-field>
      </form>
      <!-- 验证码 -->
      <van-field v-model="state.sms" type="number" center placeholder="请输入短信验证码">
        <template #left-icon>
          <Svgview ion="#icon-jiesuo" />
        </template>
        <template #button>
          <van-button size="small" type="primary" :disabled="state.verification" class="verification" @click="getVer">
            发送验证码</van-button>
        </template>
      </van-field>
    </van-cell-group>
    <div class="btn">
      <van-button round type="success" color="red" size="large" @click="login" :disabled="!state.verification">登录
      </van-button>
    </div>
    <div class="qr">
      <qr-code :value='state.qrUrl' :size="100" />
      <div class="qrRefresh">
        <SvgView ion='#icon-shuaxin' />
        <span @click="refresh">刷新二维码</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted, reactive } from "vue";
import { useRouter } from "vue-router";
import {
  VerificationCode,
  getVerification,
  phoneLogin,
} from "@/assets/axios/login";
import { getKey, getQr, getQrStatus } from '../../assets/axios/qr'
import { Toast } from "vant";
import Svgview from "@/components/SvgView";
let state = reactive({
  tel: "",
  sms: "",
  paw: '',
  verification: false,
  qrUrl: '',
  key: '',
});
const router = useRouter();
onMounted(async () => {
  refresh()
  loginVerfiy
})
onUnmounted(() => {
  clearInterval(loginVerfiy)
})
const loginVerfiy = setInterval(async () => {
  let Qrstatus = await getQrStatus(state.key)
  if (Qrstatus.data.code == 803) {
    Toast('登录成功')
    clearInterval(loginVerfiy)
    router.push('/home')
  } else if (Qrstatus.data.code == 800) {
    refresh()
  }
}, 3000)
//获取验证码
const getVer = async () => {
  if (!state.verification) {
    let res = await getVerification(state.tel);
    console.log(res);
    if (res.data.code == 400) {
      Toast(res.data.message);
    } else if (res.data.code == 200) {
      state.verification = true;
      setTimeout(() => {
        state.verification = false;
      }, 60000);
    }
  } else {
    Toast("请60秒后再试");
  }
};
//登录
const login = () => {
  VerificationCode(state.tel, state.sms).then(ver => {
    if (ver.data.code === 200) {
      phoneLogin(state.tel, state.paw).then(res => {
        if (res.data.code === 200) {
          router.push("/home");
        } else {
          Toast("账号或密码错误,请重试!");
        }
        console.log(res);
      }).catch(error => {
        Toast("账号或密码错误,请重试!");
      })
    } else {
      Toast("验证码错误,请重试")
    }
    console.log('验证码', ver);
  }).catch(err => {
    Toast("验证码错误,请重试")
  })
};
//刷新二维码
const refresh = async () => {
  let key = await getKey()
  state.key = key.data.data.unikey
  let qr = await getQr(state.key)
  state.qrUrl = qr.data.data.qrurl
}
</script>

<style scoped lang="less">
.container {
  background-color: white;
  height: 100vh;
  padding-top: 100px;

  .van-cell {
    background-color: rgb(247, 247, 247);
    height: 50px;
    margin: 10px auto;
    border-radius: 50px;
    width: 90%;

    .icon {
      margin-top: 6px;
    }
  }

  .van-cell-group--inset {
    margin: 0;
  }

  .verification {
    background-color: rgb(247, 247, 247);
    border: none;
    color: red;
  }

  .btn {
    text-align: center;

    .van-button {
      width: 90%;
      height: 50px;
      margin: 10px auto;
    }
  }

  .vp {
    width: 100%;
    text-align: center;
    margin-top: 20px;
    color: silver;
  }

  .qr {
    margin-top: 20px;
    text-align: center;

    .qrRefresh {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 5px;

      .icon {
        height: 15px;
        width: 15px;
      }

      span {
        font-size: 10px;
      }
    }
  }
}
</style>
